<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Menu
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-menu vertical secondary pointing>
        <sui-menu-item is="sui-header">anzia.net</sui-menu-item>
        <a
          is="sui-menu-item"
          v-for="item in items"
          :key="item"
          :content="item"
          :active="isActive(item)"
          @click="select(item)"
        />
        <sui-menu-item>
          <sui-input icon="search" placeholder="搜索..."/>
        </sui-menu-item>
        <sui-menu-item position="right">
          <sui-button primary>注册</sui-button>
        </sui-menu-item>
      </sui-menu>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      items: ['课程', '博客', '社区'],
      active: '课程'
    }
  },
  methods: {
    isActive (item) {
      return this.active === item
    },
    select (item) {
      this.active = item
    }
  }
}
</script>

<style scoped>

</style>
